<template>
    <table class="table1">
        <tr>
            <td>分类编号：</td>
            <td>
                <el-input v-model="input1" class="w-50 m-2 input" placeholder="请输入分类编号" />
            </td>
            <td>分类名称：</td>
            <td>
                <el-input v-model="input2" class="w-50 m-2 input" placeholder="请输入分类名称" />
            </td>
            <td>是否可用：</td>
            <td>
                <el-input v-model="input3" class="w-50 m-2 input" placeholder="请选择是否可用" />
            </td>
        </tr>
        <tr>
            <td style="text-align: right;">备注：</td>
            <td>
                <el-input v-model="input4" class="w-50 m-2 input" placeholder="请输入备注" />
            </td>
            <td>开始时间：</td>
            <td>
                <div class="demo-date-picker">
                    <div class="block">
                        <el-date-picker v-model="value1" type="date" placeholder="开始时间"
                            :default-value="new Date(2010, 9, 1)" style="width:142px ; height: 40px;" />
                    </div>
                    <span class="to">至</span>
                    <div class="block">
                        <el-date-picker v-model="value2" type="date" placeholder="结束时间"
                            :default-value="new Date(2010, 9, 1)" style="width:140px ;height: 40px;" />
                    </div>
                </div>
            </td>
            <td>修改时间：</td>
            <td>
                <div class="demo-date-picker">
                    <div class="block">
                        <el-date-picker v-model="value3" type="date" placeholder="开始时间"
                            :default-value="new Date(2010, 9, 1)" style="width:142px ;height: 40px;" />
                    </div>
                    <span class="to">至</span>
                    <div class="block">
                        <el-date-picker v-model="value4" type="date" placeholder="结束时间"
                            :default-value="new Date(2010, 9, 1)" style="width:140px ;height: 40px;" />
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <div class="ProductClassify_content">
        <div class="left"><span class="ProductClassify_content_font_color">❤</span> 商品分类</div>
        <div class="right">
            <el-button class="icon" type="primary" :icon="Search" @click="pageLoad">查询</el-button>
            <el-button class="icon op" type="primary" :icon="Refresh" @click="confir">重置</el-button>
            <el-button class="icon " color="rgb(103,194,58)" type="primary" @click="add">+ 新建</el-button>
            <el-button class="icon " type="primary" :icon="Edit" @click="loadOne">编辑</el-button>
            <el-button class="icon " color="rgb(245,108,98)" type="primary" :icon="Delete" @click="del">删除</el-button>
            <!-- <el-button class="icon op" color="green" type="primary"><span>↑</span> 导入</el-button>
            <el-button class="icon op" color="green" type="primary"><span>↓</span>导出</el-button> -->
            <el-button class="gd ProductClassify_content_font_color" color="white" type="primary">❤</el-button>
        </div>
    </div>
    <!-- 弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="编辑">
        <el-form :model="tableDataInput">
            <el-form-item label="分类编号" :label-width="formLabelWidth">
                <el-input v-model="tableDataInput.id" autocomplete="off" />
            </el-form-item>
            <el-form-item label="上级分类" :label-width="formLabelWidth">
                <el-select v-model="tableDataInput.name" placeholder="Please select a zone">
                    <el-option label="电脑办公" value="电脑办公" />
                    <el-option label="一级分类" value="一级分类" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="tableDataInput.remark" autocomplete="off" />
            </el-form-item>
            <el-form-item label="是否可用" :label-width="formLabelWidth">
                <el-radio-group v-model="tableDataInput.ifTrue" class="ml-4">
                    <el-radio label="是" size="large">是</el-radio>
                    <el-radio label="不可" size="large">不可</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updata">
                    修改
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="分类编号" width="120" />
        <el-table-column property="name" label="分类名称" show-overflow-tooltip />
        <el-table-column property="" label="上级分类" show-overflow-tooltip width="120" />
        <el-table-column label="分类图片" show-overflow-tooltip width="120">
            <img style="width:30px" src="/img/vol.png" alt="">
        </el-table-column>
        <el-table-column property="ifTrue" label="是否可用" show-overflow-tooltip />
        <el-table-column property="remark" label="备注" show-overflow-tooltip />
        <el-table-column property="createUser" label="创建人" show-overflow-tooltip />
        <el-table-column property="date" label="创建时间" show-overflow-tooltip />
        <el-table-column label="分类时间" width="200">
            <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
    </el-table>

    <el-config-provider :locale="locale">
        <div class="demo-pagination-block">
            <el-pagination :page-sizes="[2, 3, 4, 5]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                :page-size='pageSize' @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </el-config-provider>

    <!-- v-model:current-page="currentPage4" v-model:page-size="pageSize4" 
    :small="small" :disabled="disabled" :background="background"-->
</template>
  
<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { getCurrentInstance, onMounted } from 'vue'
import { ref } from 'vue'
import { ElTable } from 'element-plus'
import { Delete, Edit, Search, Refresh } from "@element-plus/icons-vue";
import axios from 'axios'

// 分页变成中文
let locale = zhCn
// 创建事件的开始时间
const value1 = ref('')
// 创建时间的结束时间
const value2 = ref('')
// 修改时间的开始时间
const value3 = ref('')
// 修改时间的结束时间
const value4 = ref('')
// 分类编号
let input1 = ref('')
// 分类名称
let input2 = ref('')
// 是否可用
let input3 = ref('')
// 备注
let input4 = ref('')
// 弹出框的状态
let pageSize = ref(3)
let pageIndex = ref(1)
let total = ref(100)
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

let tableDataInput = ref({
    id: '',
    name: '',
    img: '/img/vol.png',
    ifTrue: '',
    remark: '',
    createUser: '超级管理员'
})
// 获取$message
const { appContext: { config: { globalProperties: { $message } } } } = getCurrentInstance();

const multipleTableRef = ref()
const multipleSelection = ref([])
const tableData = ref([])
// 分页
// 设置分页个数
const handleSizeChange = (val) => {
    pageSize.value = val
    pageLoad()
}
// 设置当前页数
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    pageIndex.value = val
    pageLoad()
}
// 复选框的选中
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}

let confir = () => {
    tableDataInput.value = {
        id: '',
        name: '',
        img: '/img/vol.png',
        ifTrue: '',
        remark: '',
        createUser: '超级管理员'
    }
}

let add = async () => {
    let { data } = await axios.post('cxjGetAdd', {
        id: input1.value,
        name: input2.value,
        ifTrue: input3.value,
        remark: input4.value,
        date: NewDate()
    })
    pageLoad()
    if (data) return $message({
        type: 'success',
        message: '添加成功'
    })
    else {
        return $message({
            type: 'warning',
            message: '添加失败'
        })
    }
}
// 删除接口
let del = () => {
    let obj = multipleSelection.value.forEach(r => {
        axios.post('cxjdel', {
            id: r.id
        })
    })
    pageLoad()
}
// 查找接口
let loadOne = async () => {
    if (multipleSelection.value.length == 0) return $message('请选择要编辑的行')
    if (multipleSelection.value.length > 1) return $message('只能选择一个')
    else {
        let { data } = await axios.get('cxjGetOne', {
            params: {
                id: multipleSelection.value[0].id
            }
        })
        tableDataInput.value.id = data.id
        tableDataInput.value.name = data.name
        tableDataInput.value.ifTrue = data.ifTrue
        tableDataInput.value.remark = data.remark
        dialogFormVisible.value = true
    }
}
// 修改接口
let updata = async () => {
    await axios.post('cxjupdate', {
        id: tableDataInput.value.id,
        name: tableDataInput.value.name,
        img: tableDataInput.value.img,
        ifTrue: tableDataInput.value.ifTrue,
        remark: tableDataInput.value.remark,
        createUser: tableDataInput.value.createUser,
        data: 'aaa'
    })
    pageLoad()
    dialogFormVisible.value = false
}
// 分页接口
let pageLoad = async () => {
    let { data } = await axios.get('cxjPage', {
        params: {
            pageIndex: pageIndex.value,
            pageSize: pageSize.value,
            id: input1.value,
            name: input2.value,
            ifTrue: input3.value,
            remark: input4.value
        }
    })
    tableData.value = data.data
    total.value = data.count
}
onMounted(() => {
    pageLoad()
    // console.log();
})

let NewDate = () => {
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    month < 10 ? month = '0' + month : month
    let day = date.getDate()
    day < 10 ? day = '0' + day : day
    let hour = date.getHours()
    hour < 10 ? hour = '0' + hour : hour
    let minutes = date.getMinutes()
    minutes < 10 ? minutes = '0' + minutes : minutes
    let seconds = date.getSeconds()
    seconds < 10 ? seconds = '0' + seconds : seconds
    return year + "-" + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
}
</script>

<style scoped lang="scss">
.table1 {
    width: 100%;

    td {
        padding: 10px;

        // width: 200px;
        .input {
            width: 100%;
            height: 40px;
        }

        // border: 1px solid #ccc;

        &:nth-child(2n-1) {
            width: 45px;
        }

        &:nth-child(2n) {
            width: 200px;
            // text-align: center;
        }
    }
}

.right {
    margin: 10px;
}

.demo-date-picker {
    .to {
        margin: 0 10px;
    }

    // display: flex;
    width: 100%;
    padding: 0;
    align-items: center;
}

.demo-date-picker .block {
    display: inline-block;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.ProductClassify_content {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;

    .ProductClassify_content_font_color {
        color: pink;
    }
}

.demo-pagination-block {
    margin: 20px 20px 0 0;
    float: right;
}
</style>